<template>
	<view style="max-height: 100vh;overflow: hidden;">
		
		<!-- 格子广告 -->
		<view v-show="show_ad" class="grid_left">
			<ad-custom :unit-id="xcx_ad.GridLeftId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_right" :style="{left: (_windowWidth-70)+'px'}">
			<ad-custom :unit-id="xcx_ad.GridRightId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<!-- 场景一 庄园 -->、
		<view v-if="!scene_pk" class="back" @click="back()">
			<view class="backzhezhao"></view>
			<image src="../../static/images/back3.png"></image>
		</view>
		<view class="scene1" style="z-index: 1;" >
					
			<view class="w100 geduan" :style="{ height: geduan_height+'px'}">
				<!-- 导航条 -->
				<view class="navbar w100 txt_c fz30" style="line-height: 44px;color: #FFF;">凹特庄园</view>	
				<!-- 用户称号 -->
				<view class="user_chenghao_box flex flex_wrap">
					<view class="chenghao  flex flex_ac flex_jc mr10" 
						:class="item.class"
						:style="{ backgroundColor: item.bgcolor}"
						v-for="(item,index) in aotemaninfo.chenghao_list">{{item.name}}</view>
				</view>
				<!-- 用户头像 -->
				<view class="user_window">
					<view class="usericon prel">
						<image mode="widthFix" :src="userinfo.avatar"></image>
					</view>
					<view class="usernamebox flex flex_ac">
						<view class="v1 flex flex_ac">
							<view class="v11 hidden1">{{userinfo.nickname}}</view>
						</view>
						<view class="v2 hidden1">{{userinfo.nickname}}</view>
					</view>
				</view>
			</view>
			<view class="bg1 w100">
				<image src="../../static/zhuangyuan/bg1.svg"></image>
			</view>
			<view class="prel box1">
				<view class="bubble">
					<image mode="widthFix"  src="../../static/zhuangyuan/011-bubble.svg"></image>
				</view>
				<view class="water">
					<image mode="widthFix"  src="../../static/zhuangyuan/water.png"></image>
				</view>
				<view class="wheel">
					<image mode="widthFix"  src="../../static/zhuangyuan/wheel.png"></image>
				</view>
				
				<view class="icon-home-mailbox_empty">
					<image mode="widthFix"  src="../../static/zhuangyuan/icon-home-mailbox_empty.png"></image>
				</view>
				
				<view v-if="show_guaishou" @click="guaishou_window_open()" class="guaishou">
					<image mode="widthFix"  :src="img_list.guaishou"></image>
				</view>
				
				<view class="A">
					<image mode="widthFix"  src="../../static/zhuangyuan/A.png"></image>
				</view>
				<view class="bg2 w100">
					<image src="../../static/zhuangyuan/bg2.png"></image>
				</view>
				<view class="granary">
					<image mode="widthFix"  src="../../static/zhuangyuan/granary-empty.svg"></image>
				</view>
				
				<view @click="zhanzhan()" class="eggbox">
					<view :class="aotemaninfo.egg_prg==100?'caisebg2 anim360':''" class="egg eggbg">
						<view v-if="aotemaninfo.egg_prg==100" class="zhanzhan">
							<image mode="widthFix" src="../../static/zhuangyuan/f_001.png"></image>
						</view>
					</view>
					<view class="eggprogress flex flex_ac flex_jc fz25">
						<view 
							:class="aotemaninfo.egg_prg==100?'caisebg anim360':''" 
							:style="{ width: aotemaninfo.egg_prg + '%'}" class="eggprogress2"></view>
						<view class="eggprogress_text txt_c fz25 w100">{{aotemaninfo.egg_prg}}%</view>
					</view>
				</view>
				
				<view class="food">
					<image mode="widthFix"  src="../../static/zhuangyuan/food.svg"></image>
				</view>
				
				<view class="dog-work" @click="dogMsg()">
					<view v-if="show_dog_msg" class="dog-msg">{{dog_msg}}
						<view class="dog-msg-jiantou"></view>
					</view>
					<image mode="widthFix"  src="../../static/zhuangyuan/dog-work.svg"></image>
				</view>
				
				<view class="grade_notice">
					<image mode="widthFix" src="../../static/zhuangyuan/grade_notice.png"></image>
					<view class="grade_notice_text">
						<view class="v1">年龄:{{aotemaninfo.age}}</view>
						<view class="v2">等级:{{aotemaninfo.grade}}({{now_jingyan}}/{{up_jingyan}})</view>
						<view class="v2">体力:{{aotemaninfo.tili}}</view>
						
					</view>
				</view>
				<view :class="show_aoteman_msg?'big_animaton':''" @click="aotemanMsg()" class="aoteman">
					<view v-if="show_aoteman_msg" class="aoteman-msg">{{aoteman_msg}}
						<view class="aoteman-msg-jiantou"></view>
					</view>
					<!--能量石使用 -->
					<view v-if="nengliangshi_daojishi>0">
						<view class="chongnengzhong caisebg3 anim360 flex flex_jc flex_ac">
							能量石充能中
						</view>
						<view class="daojishibg caisebg3 anim360"></view>
						<view class="daojishi">
							<u-count-down 
								@change="daojishichange"
								@finish="daojishifinish"
								:time=nengliangshi_daojishi 
								format="mm:ss"></u-count-down>
						</view>
						<view class="aotenengliangshi caisebg anim360"></view>
						<view :style="{ height: homeroleHeight+30 + 'px',width: homeroleHeight+30 + 'px'
									,top: -15 + 'px',left:-((homeroleHeight+30-homeroleWidth)/2)+'px'}"  
							class="chongnengliangzao caisebg3 anim360"></view>
					</view>
					
					<image mode="widthFix" src="../../static/zhuangyuan/aoteman_home.gif"></image>
				</view>
			</view>
			<!-- 顶部菜单 -->
			<view class="top_menu_box">
				<view class="top_meun">
					<view @click="egg_window_open()" class="li flex flex_wrap flex_jc">
						<view class="meun_icon prel">
							<view class="topegg eggbg"></view>
							<view v-if="aotemaninfo.egg_count>0" class="badge2 flex flex_ac flex_jc">
								{{aotemaninfo.egg_count}}
							</view>
						</view>
						<view class="meun_name w100 fz25 mt10 txt_c hidden1">凹特蛋</view>
					</view>
					<view class="li flex flex_wrap flex_jc" @click="rank_list_open">
						<view class="meun_icon">
							<image mode="widthFix" src="../../static/zhuangyuan/rank.png"></image>
						</view>
						<view class="meun_name w100 fz25 mt10 txt_c hidden1">排行榜</view>
					</view>
					
					<view @click="notice_window_open()" class="li flex flex_wrap flex_jc">
						<view class="meun_icon">
							<image mode="widthFix" src="../../static/zhuangyuan/message.png"></image>
						</view>
						<view class="meun_name w100 fz25 mt10 txt_c hidden1">消息</view>
					</view>
					
					<!-- <view @click="randompk()" class="li flex flex_wrap flex_jc">
						<view class="meun_icon">
							<image style="border-radius: 100%;" mode="widthFix" src="../../static/zhuangyuan/aotebi.png"></image>
						</view>
						<view class="meun_name w100 fz25 mt10 txt_c hidden1">金币</view>
					</view> -->
					
					<view @click="goQiandao()" class="li flex flex_wrap flex_jc">
						<view class="meun_icon">
							<image style="border-radius: 100%;" mode="widthFix" src="../../static/images/sign.png"></image>
						</view>
						<view class="meun_name w100 fz25 mt10 txt_c hidden1">签到</view>
					</view>
					
					<view @click="randompk()" class="li flex flex_wrap flex_jc">
						<view class="meun_icon">
							<image style="border-radius: 100%;" mode="widthFix" src="../../static/zhuangyuan/vs.png"></image>
						</view>
						<view class="meun_name w100 fz25 mt10 txt_c hidden1">随机挑战</view>
					</view>
				</view>
			</view>
			
			<!-- 底部菜单 -->
			<view class="bottom_menu flex flex_ac" :style="{ top: windowHeight-100 + 'px'}">
				<view class="li flex flex_jc flex_wrap" @click="friends_list_open()">
					<view class="meun_icon">
						<image style="border-radius: 100%;" mode="widthFix" src="../../static/zhuangyuan/friends2.png"></image>
					</view>
					<view class="meun_name w100 hidden1 txt_c fz30 mt10">好友</view>
				</view>
				
				<view @click="goNiudanji()" class="li flex flex_jc flex_wrap">
					<view class="meun_icon">
						<image mode="widthFix" src="../../static/zhuangyuan/niudan.png"></image>
					</view>
					<view class="meun_name w100 hidden1 txt_c fz30 mt10">幸运扭蛋机</view>
				</view>
				
				<view class="li flex flex_jc flex_wrap prel" @click="jineng_window_open()">
					<view v-if="aotemaninfo.jinengdian>0" class="badge flex flex_ac flex_jc">
						{{aotemaninfo.jinengdian}}
					</view>
					<view class="meun_icon">
						<image mode="widthFix" src="../../static/zhuangyuan/skill.png"></image>
					</view>
					<view class="meun_name w100 hidden1 txt_c fz30 mt10">技能</view>
				</view>
				
				<view @click="nengliangshi_window_open()" class="li flex flex_jc flex_wrap prel">
					<view v-if="aotemaninfo.nengliangshi>0" class="badge flex flex_ac flex_jc">
						{{aotemaninfo.nengliangshi}}
					</view>
					<view class="meun_icon nengliangshi nengliangshibg">
					</view>
					<view class="meun_name w100 hidden1 txt_c fz30 mt10">能量石</view>
				</view>
				
			</view>
		</view>
		<!--场景2 pk -->
		<view class="scene2 w100">
			<!-- 对三角 左边 -->
			<view :class="scene_pk?'scenepkin':''" class="triangle-left" :style="{ 'border-top': windowHeight + 'px solid #5999D6' ,
			 'border-right':windowWidth+'px solid transparent','left':-windowWidth+'px'}">
			 </view>
			 <!-- 对三角 右边 -->
			<view :class="scene_pk?'scenepkin':''" class="triangle-right" :style="{ 'border-bottom': windowHeight + 'px solid #F15B5C' , 
			'border-left':windowWidth+'px solid transparent','left':windowWidth+'px'}"></view>
			<!-- 对交线 -->
			<view :class="scene_pk?'pkline_in':''" class="diagonal-line" :style="{ height: windowHeight + 'px' , width:windowWidth+'px' ,top:-windowHeight+'px'}" ></view>
			
			<!--角色用户1 -->
			<view :class="scene_pk?'pk_left_aoteman_in':''" :style="{ bottom: (windowHeight-roleHeight)/2 + roleHeight + 'px' }" 
				class="pk_user1 flex flex_wrap flex_jc">
				<view class="pk_user_icon">
					<image mode="widthFix" :src="userinfo.avatar"></image>
				</view>
				<view class="pk_user_name1 w100 mt10 fz25 hidden1 txt_c">{{userinfo.nickname}}</view>
			</view>
			
			<!--角色1 -->
			<view :class="scene_pk?'pk_left_aoteman_in':''" class="pk-role1" :style="{ top: (windowHeight-roleHeight)/2 + 'px' }">
				<image :class="pk_role1_status" mode="widthFix" src="../../static/zhuangyuan/aoteman_pk.png"></image>
			</view>
			
			<!--角色用户2 -->
			<view :class="scene_pk?'pk_right_aoteman_in':''" :style="{ top: (windowHeight-roleHeight)/2 + roleHeight + 'px' }" 
				class="pk_user2 flex flex_wrap flex_jc">
				<view class="pk_user_icon">
					<image mode="widthFix" :src="be_attack_user.user.avatar"></image>
				</view>
				<view class="pk_user_name2 w100 mt10 fz25 hidden1 txt_c">{{be_attack_user.user.nickname}}</view>
			</view>
			
			<!--角色2 -->
			<view :class="scene_pk?'pk_right_aoteman_in':''" class="pk-role2" :style="{ top: (windowHeight-roleHeight)/2 + 'px'}">
				<image :class="pk_role2_status" mode="widthFix" src="../../static/zhuangyuan/aoteman_pk.png"></image>
			</view>
			<view v-if="scene_pk" :class="scene_pk?'vin':''" class="v text" :style="{ top: (windowHeight)/2-wordsHeight + 'px'}">V</view>
			<view v-if="scene_pk" :class="scene_pk?'sin':''" class="s text" :style="{ top: (windowHeight)/2 + 'px'}">S</view>
			<!--激光射线 -->
			<view class="pkline1" :style="{ top: (windowHeight-attckHeight)/2 + 'px'}" :class="user_attack?'loader':''"></view>
			<!--激光射线2 -->
			<view class="pkline2" :style="{ top: (windowHeight-attckHeight)/2 + 'px'}" :class="user_be_attack?'loader':''"></view>
			
			
			<!--攻击按钮 -->
			<view v-if="display_attack&&scene_pk" @click="attack()" :class="attack_btn?'forbid_gongji':''"  :style="{ top: (windowHeight-roleHeight)/2 + roleHeight + 10  + 'px'}" 
			class="gongji flex flex_ac flex_jc">攻</view>
		</view>
		
		<!-- 推荐列表 -->
		<u-popup :closeOnClickOverlay = "false" :round="20" mode="center" :show="tuijian_window_show" @close="tuijian_window_close">
			<view class="flex flex_wrap flex_jc">
				<view class="tuijian_window prel flex flex_wrap flex_jsa prel">
					<button class="close prel"
						hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="tuijian_window_close()">
						<image class="w100" mode="widthFix" src="../../static/images/pop/close.png"></image>
					</button>
					<image style="width: 80%;margin-top: -60rpx;" mode="widthFix" src="../../static/images/pop/moretuijian.png"></image>
					<view class="tuijianli_box flex flex_wrap flex_jsa flex_ac">
						<view @click="tuijianxcxJump(item)" class="tuijianli" v-for="(item,index) in recommend_xcx">
							<image mode="widthFix" class="w100"
								:src="item.head_img"></image>
							<view class="fz25 word w100 txt_c hidden1">{{item.name}}</view>	
						</view>
					</view>
				</view>
				<ad class="mt20" :unit-id="xcx_ad.banner" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
			</view>
		</u-popup>
		
		<!-- 战斗结果弹出层 -->
		<u-popup :closeOnClickOverlay = "false" :round="20" mode="center" :show="fighting_result_show" @close="fighting_result_close">
			<view class="fighting_window">
				<view class="fighting_title" :style="{ color: fighting_title_color}">{{fighting_title}}</view>
				<view class="uesrinfo flex">
					<view class="fighting_icon prel">
						<image mode="widthFix" :src="userinfo.avatar"></image>
					</view>
					<view class="fighting_window_right flex flex_wrap ml20">
						<view class="nameandgrade flex fz30 w100 mt10">
							<view class="fighting_name">{{userinfo.nickname}}</view>
							<view class="fighting_grade flex ml10">
								<view class="v1">等级</view>
								<view class="v2">{{aotemaninfo.grade}}</view>
								<view v-if="fighting_result.up_garde>0" class="v3 ml10">(升级)</view>
							</view>
						</view>
						<view class="jingyanbox flex flex_ac">
							<view class="jingyanprg">
								<u-line-progress :percentage="grade_percentage">
									<text class="u-percentage-slot">+{{fighting_result.addjingyan}}经验</text>
								</u-line-progress>
							</view>
							<view class="jingyantext flex fz25">
								<view class="v1 ml10">经验</view>
								<view class="v2">{{now_jingyan}}</view>
								<view class="v3">/{{up_jingyan}}</view>
								<view class="v4 ml10">体力:{{aotemaninfo.tili}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="aotemantips flex flex_ac">
					<view class="aotemanicon">
						<image mode="widthFix" src="../../static/images/danmu.png"></image>
					</view>
					<view class="fz25">：</view>
					<view class="aotemanmsg fz25">
						{{fighting_result.aotemanmsg}}
					</view>
				</view>
				<view v-if="fighting_result.status==1" class="fighting_msg">
					<view class="fighting_man">TO：{{be_attack_user.user.nickname}}</view>
					<u--textarea v-model="notice_msg" height=40 placeholder="你可以给对手留下一句话" ></u--textarea>
				</view>
				<view class="w100 flex flex_jc mt20">
					<view @click="fighting_result_close()" class="close_fighting_window flex_ac flex flex_jc">确认</view>
				</view>
			</view>
			<view class="w100 flex flex_jc" style="position: absolute;bottom: -170rpx;">
				<button @click="tuijian_window_open()"
					hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
					class="prel flex flex_jc flex_wrap" style="width: 250rpx;">
					<image mode="widthFix" style="width: 50%;top: -30%;position: absolute;" 
						class="shouping" src="../../static/images/pop/shouping.png"></image>
					<image mode="widthFix" style="width: 60%;top: 55%;position: absolute;"
						src="../../static/images/pop/moreganme.png"></image>
					<view style="width: 170rpx;height: 120rpx;
					border-radius: 20rpx;background-color: #259fff;"></view>
				</button>
			</view>
		</u-popup>
		<!-- 好友弹出层 -->
		<u-popup :show="friends_list_show" :round="10" mode="bottom" @close="friends_list_close" >
			<view class="friends_list_window pop_list_window_h w100">
				<view class="pop_icon_box w100 flex flex_jc">
					<view class="pop_icon">
						<image mode="widthFix" src="../../static/zhuangyuan/friends2.png"></image>
					</view>
				</view>
				<view class="pop_navbar">
					<view class="pop_navbar_text">好友</view>
					<view @click="friends_list_close" class="pop_navbar_text">关闭</view>
				</view>
				<view class="pop_list_box mt20">
					
					<view class="pop_li w100 flex flex_ac">
						<view class="pop_li_icon">
							<image mode="widthFix" src="../../static/zhuangyuan/friends2.png"></image>
						</view>
						<view style="font-weight: bold;" class="pop_li_middle flex flex_wrap fz40">
							+添加好友一起玩
						</view>
						<button open-type="contact" style="width: 160rpx;height: 60rpx;border-radius: 30rpx;
							background-color: red;color: #fff;font-weight: bold;line-height: 60rpx;" 
							class="pop_li_right ml20 flex flex_jc fz30">
							添加好友
						</button>
					</view>
					
					<view class="pop_li w100 flex flex_ac" v-for="(item,index) in friends_list">
						<view @click="goDetail(item.aotemanInfo.openid)" class="pop_li_icon">
							<image mode="widthFix" :src="item.followInfo.avatar"></image>
						</view>
						<view class="pop_li_middle flex flex_wrap">
							<view class="pop_li_middle_name w100 flex flex_ac">
								<view class="v1 hidden1">{{item.followInfo.nickname}}</view>
								<view @click="goDetail(item.aotemanInfo.openid)" v-if="item.aotemanInfo.egg_prg==100&&item.aotemanInfo.ouhuang" class="v2 fz25 ml20 caisebg2 anim360">沾沾欧皇气</view>
								<view @click="goDetail(item.aotemanInfo.openid)" v-if="item.aotemanInfo.egg_prg==100&&item.aotemanInfo.ouhuang" class="xixiegg eggbg anim360"></view>
							</view>
							<view class="pop_li_middle_bottom flex mt10">
								<view class="v1 flex flex_ac grade">等级Lv.{{item.aotemanInfo.grade}}</view>
								<view class="chenghao flex flex_ac ml10"
								:class="item2.class"
								:style="{ backgroundColor: item2.bgcolor}"
								v-if="index2<1"
								v-for="(item2,index2) in item.aotemanInfo.chenghao_list">{{item2.name}}</view>
								<view class="v1 flex flex_ac ml10 online_at">{{item.online_at}}来过</view>
							</view>
						</view>
						<view @click="tedingpk(item.aotemanInfo)" class="pop_li_right ml20 flex flex_jc flex_wrap">
							<image mode="widthFix" src="../../static/zhuangyuan/vs.png"></image>
							<view class="w100 txt_c fz25 mt10">挑战Ta</view>
						</view>
					</view>
					<view v-if="friends_list.length==0" class="mt30 fz30 col_999 w100 txt_c">暂无好友</view>
					<view v-if="friends_list.length>0" class="fenye_box mt20 flex flex_ac flex_wrap">
						<view @click="changpage(1,'friends')" :class="friends_page==1?'pagebtn2':''" 
							class="pagebtn">首页</view>
						<view @click="changpage(friends_page-1,'friends')" :class="friends_page==1?'pagebtn2':''" 
							class="pagebtn">上一页</view>
						<view class="pagebtn">{{friends_page}}</view>
						<view @click="changpage(friends_page+1,'friends')" 
							:class="friends_page==friends_page_data.last_page?'pagebtn2':''" 
							class="pagebtn">下一页</view>
						<view @click="changpage(friends_page_data.last_page,'friends')" 
							:class="friends_page==friends_page_data.last_page?'pagebtn2':''" 
							class="pagebtn">末页</view>
						<view class="fenye_bottom w100">
							<view class="w100 txt_c">
								共{{friends_page_data.last_page}}页，
								{{friends_page_data.total}}个好友</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 排行榜弹出层 -->
		<u-popup :show="rank_list_show" :round="10" mode="bottom" @close="rank_list_close" >
			<view class="rank_list_window pop_list_window_h w100">
				<view class="pop_icon_box w100 flex flex_jc">
					<view class="pop_icon">
						<image mode="widthFix" src="../../static/zhuangyuan/rank.png"></image>
					</view>
				</view>
				<view class="pop_navbar">
					<view class="pop_navbar_text">全国排行榜</view>
					<view @click="rank_list_close" class="pop_navbar_text">关闭</view>
				</view>
				<view class="pop_fenlei w100 flex flex_jsa flex_ac">
					<view :class="item.type==rank_type?'active':''" 
					@click="change_rank_type(item.type)"
					class="pop_fenlei_li flex flex_ac flex_jc" 
					v-for="(item,index) in rank_type_list">{{item.name}}</view>
				</view>
				<view class="pop_list_box rakn_pop_list_box mt20">
					<view class="pop_li w100 flex flex_ac" v-for="(item,index) in rank_list">
						<view class="paiming fz25 ml20 flex flex_wrap">
							<view class="v1 w100 txt_c">No.{{index+1}}</view>
							<view v-if="rank_type==2" class="v1 w100 txt_c mt10">攻:{{item.gongji}}</view>
							<view v-if="rank_type==3" class="v1 w100 txt_c mt10">防:{{item.fangyu}}</view>
							<view v-if="rank_type==1" class="v1 w100 txt_c mt10">Lv:{{item.grade}}</view>
							<view v-if="item.province_name!=null" 
							class="v1 w100 txt_c hidden1">({{item.province_name}})</view>
						</view>
						<view @click="goDetail(item.openid)" class="rank_pop_li_icon pop_li_icon prel">
							<image style="width: 30rpx;" v-if="index<3" class="pop_li_icon_sign" mode="widthFix" :src="'../../static/images/no-'+index+'.png'"></image>
							<image mode="widthFix" :src="item.user.avatar"></image>
						</view>
						<view class="pop_li_middle flex flex_wrap">
							<view class="pop_li_middle_name w100 hidden1">{{item.user.nickname}}</view>
							<view class="pop_li_middle_bottom flex flex_wrap">
								<view class="flex flex_ac chenghao mr10 mt10"
									:class="item2.class"
									:style="{ backgroundColor: item2.bgcolor}"
									v-for="(item2,index2) in item.chenghao_list">{{item2.name}}</view>
							</view>
						</view>
						<view @click="tedingpk(item)" class="pop_li_right ml20 flex flex_jc flex_wrap">
							<image :class="item.pk_record?'img_black-and-white':''" 
								style="border-radius: 100%;"
								mode="widthFix" src="../../static/zhuangyuan/vs.png"></image>
							<view class="w100 txt_c fz25 mt10">挑战Ta</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 技能弹出层 -->
		<u-popup :show="jineng_window_show" :round="10" mode="bottom" @close="jineng_window_close">
			<view class="jineng_window">
				<view class="jineng_window_title flex flex_ac flex_jc">技能点:{{jinengdian}}</view>
				<view class="jn_gongji flex flex_jc flex_ac mt30">
					<view class="v1 mr20">攻击:{{gongji}}</view>
					<view>
						<u-number-box 
						integer
						:disabledInput="true"
						:disablePlus="jinengdian<=0"
						:min = "0" 
						:max = "add_max_gongji"
						v-model="add_gongji" 
						@change="gongji_change()"
						></u-number-box></view>
				</view>
				
				<view class="jn_gongji flex flex_jc flex_ac mt30">
					<view class="v1 mr20">防御:{{fangyu}}</view>
					<view>
						<u-number-box 
						integer
						:disablePlus="jinengdian<=0"
						:disabledInput="true"
						:min = "0" 
						:max = "add_max_fangyu"
						v-model="add_fangyu" 
						@change="fangyu_change()"
						></u-number-box></view>
				</view>
				<view class="btn_radius">
					<view @click="addJn()">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- 消息弹出框 -->
		<u-popup :show="notice_window_show" :round="10" mode="center" @close="notice_window_close">
			<view class="notice_window">
				<view v-if="!message_show" class="notice_window_box1">
					<view class="notice_title fz30 txt_c mt20 w100">消息中心</view>
					<view class="notice_window_list_box mt20 flex flex_wrap">
						<view v-for="(item,index) in notice_list" 
						@click="message_detail(item)" class="notice_window_li fz30 flex flex_ac">
							<view class="notice_left flex flex_jc">[{{item.type_name}}]</view>
							<view class="notice_middle hidden1">{{item.msg}}</view>
							<view class="notice_right flex flex_jc">{{item.time2}}</view>
						</view>
					</view>
					<view v-if="notice_list.length==0" class="mt30 fz30 col_999 w100 txt_c">暂无消息</view>
					<view v-if="notice_list.length>0" class="fenye_box mt20 flex flex_ac flex_wrap">
						<view @click="changpage(1,'msg')" 
							:class="notice_page==1?'pagebtn2':''" class="pagebtn">首页</view>
						<view @click="changpage(notice_page-1,'msg')" :class="notice_page==1?'pagebtn2':''" 
							class="pagebtn">上一页</view>
						<view class="pagebtn">{{notice_page}}</view>
						<view @click="changpage(notice_page+1,'msg')" 
							:class="notice_page==notice_page_data.last_page?'pagebtn2':''" 
							class="pagebtn">下一页</view>
						<view @click="changpage(notice_page_data.last_page,'msg')" 
							:class="notice_page==notice_page_data.last_page?'pagebtn2':''" 
							class="pagebtn">末页</view>
						<view class="fenye_bottom w100">
							<view class="w100 txt_c">
								共{{notice_page_data.last_page}}页，
								{{notice_page_data.total}}条消息</view>
						</view>
					</view>
				</view>
				
				<view v-if="message_show" class="notice_window_box2 prel">
					<view class="notice_title fz30 txt_c mt20 w100">[挑战消息]</view>
					<view @click="message_back()" class="v2 flex flex_ac flex_jc">返回</view>
					<view @click="goDetail(notice_msg_detail.openid)" class="v3 fz30 flex flex_ac flex_jc flex_wrap prel">
						<view class="v31">
							<image mode="widthFix" style="border-radius: 100%;" :src="notice_msg_detail.guanlian_avatar"></image>
						</view>
						<view>{{notice_msg_detail.msg}}</view>
					</view>
					<view class="v4 flex flex_wrap">
						<view class="v41 fz25">{{notice_msg_detail.tips}}</view>
						<view class="v42 fz30 flex flex_ac txt_c">{{notice_msg_detail.created_time}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 能量石窗口 -->
		<u-popup :show="nengliangshi_window_show" :round="10" mode="center" @close="nengliangshi_window_close">
			<view class="nengliangshi_window prel">
				<view class="top flex flex_jc flex_ac flex_wrap">
					<view class="nengliangshi nengliangshibg"></view>
					<navigator url="/pages/nengliangshi_list/index" class="fz25 nengliangrecord ml20">
						<view>查看能量石记录</view>
					</navigator>
					<view v-if="aotemaninfo.nengliangshi<10" class="nengliangshi_count w100 txt_c">能量石不足×{{aotemaninfo.nengliangshi}}</view>
					<view v-if="aotemaninfo.nengliangshi>=10" class="nengliangshi_count w100 txt_c">能量石×{{aotemaninfo.nengliangshi}}</view>
				</view>
				<view v-if="aotemaninfo.nengliangshi<10" 
					class="middle flex flex_ac flex_jc fz30">每次使用能量石需要10个或以上，
				能量石可以通过签到或者凹特庄园打怪或者去别人庄园沾沾欧皇气获取，每消耗一颗能量石，
				凹特幼崽均可获得相应经验和提升凹特扭蛋的成熟度</view>
				<view v-if="aotemaninfo.nengliangshi>=10" class="middle2 flex flex_ac flex_jc">
					<view>
						<u-number-box 
						integer
						:disabledInput="true"
						:disablePlus="add_nengliangshi<10"
						:min = "10" 
						:max = "add_max_nengliangshi"
						v-model="add_nengliangshi" 
						@change="nengliangshi_change()"
						></u-number-box></view>
				</view>
				<view v-if="aotemaninfo.nengliangshi<10" @click="nengliangshi_window_close()" 
					class="bottom flex flex_ac flex_jc">我知道了</view>
				<view v-if="aotemaninfo.nengliangshi>=10" @click="nengliangshiUse()"
					class="bottom flex flex_ac flex_jc">使用能量石</view>
			</view>
		</u-popup>
		
		<!-- 凹特蛋window -->
		<u-popup :show="egg_window_show" :round="10" mode="center" @close="egg_window_close">
			<view class="egg_window prel">
				<view class="top flex flex_jc flex_ac flex_wrap">
					<view class="win_egg eggbg"></view>
					<navigator url="/pages/egg_list/index" class="fz25 egg_record ml20">
						<view>查看凹特蛋记录</view>
					</navigator>
					<view class="nengliangshi_count w100 txt_c">凹特蛋×{{aotemaninfo.egg_count}}</view>
				</view>
				<view v-if="aotemaninfo.egg_count<1" 
					class="middle flex flex_ac flex_jc fz30">凹特蛋可以通过签到，或者凹特幼崽充能获得哦</view>
					
				<view v-if="aotemaninfo.egg_count>1"
					class="middle flex flex_ac flex_jc fz30">凹特蛋可以通过幸运扭蛋机抽取到奖品哦</view>
				<view v-if="aotemaninfo.egg_count<1" @click="egg_window_close()" 
					class="bottom flex flex_ac flex_jc">我知道了</view>
				<view v-if="aotemaninfo.egg_count>=1" @click="goNiudanji()"
					class="bottom flex flex_ac flex_jc">幸运扭蛋机</view>
			</view>
		</u-popup>
		
		<!-- 怪兽捕捉窗口 -->
		<u-popup :show="guaishou_window_show" :round="10" mode="center" @close="guaishou_window_close">
			<view class="guaishou_window prel">
				<view class="top flex flex_jc flex_ac flex_wrap">
					<view class="guaishouicon">
						<image mode="widthFix" :src="img_list.guaishou"></image>
					</view>
					<view class="guaishou_count w100 txt_c">小怪兽×1</view>
				</view>
				<view class="middle flex flex_ac flex_jc fz30">打败小怪兽后可获得5个能量石</view>
				<view class="bottom flex flex_ac flex_jc prel">
					<view @click="daguaishow()" class="vv flex flex_ac flex_jc">看视频打败它</view>
					<view @click="fangtazou()" style="background-color: #9e9e9e;" class="vv flex flex_ac flex_jc">放它走</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import adSdk from "@/utils/advertise.js"
	import {playSound,getDateDiff2,getGradeJy,getDateDiff } from "@/utils/common"
	import {zyindex,zyGetRankList,attack,addJn,tedingpk,zhanzhan,getNengliangshiByguaishou,
	xyFollowList,randompk,zyPkMgs,zyMsgList,nengliangshiUse,getRecommendXcx} from "@/api/api"
	export default {
		data() {
			return {
				//邀请码
				invitation_code:0,
				bili:0,
				windowWidth:0,
				windowHeight:0,
				rolerealWidth:569,
				rolerealHeight:800,
				homerolerealWidth:317,
				homeroleralHeight:483,
				geduan_height:0,
				homeroleWidth:0,
				homeroleHeight:0,
				roleWidth:0,
				roleHeight:0,
				attackWidth:0,
				attckHeight:0,
				wordsHeight:0,
				display_attack:false,
				user_attack:false,
				user_be_attack:false,
				attack_btn:false,
				pk_role2_status:'',
				pk_role1_status:'',
				scene_pk:false,
				fighting_result_show:false,
				fighting_result:[],
				friends_list_show:false,
				friends_list:[],
				friends_page:1,
				friends_page_data:[],
				rank_list_show:false,
				jineng_window_show:false,
				//经验条
				grade_percentage:0,
				is_login:false,
				userinfo:[],
				aotemaninfo:[],
				//升级所需经验
				up_jingyan:0,
				//现在经验
				now_jingyan:0,
				//排行榜
				rank_list:[],
				rank_type_list:[
					{type:2,name:'攻击'},
					{type:3,name:'防御'},
					{type:1,name:'等级'},
				],
				rank_type:2,
				be_attack_user:[],
				fighting_title:'',
				fighting_title_color:'yellow',
				jinengdian:0,
				gongji:0,
				add_gongji:0,
				add_max_gongji:0,
				fangyu:0,
				add_fangyu:0,
				add_max_fangyu:0,
				
				nengliangshi:0,
				add_nengliangshi:0,
				add_max_nengliangshi:0,
				
				dog_msg_list:[],
				show_dog_msg:false,
				dog_msg:'',
				aoteman_msg_list:[],
				show_aoteman_msg:false,
				aoteman_msg:'',
				pk_click:false,
				notice_window_show:false,
				message_show:false,
				//留言
				notice_msg:'',
				notice_msg_id:0,
				notice_list:[],
				notice_page:1,
				notice_page_data:[],
				notice_msg_detail:[],
				fighting_over_click:false,
				nengliangshi_window_show:false,
				nengliangshi_use_click:false,
				nengliangshi_daojishi:0,
				zhanzhan_click:false,
				dogmsgindex:0,
				aotemanmsgindex:0,
				guaishou_window_show:false,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				show_guaishou:false,
				egg_window_show:false,
				img_list:[],
				tuijian_window_show:false,
				recommend_xcx:getApp().globalData.recommend_xcx,
				_windowWidth:getApp().globalData._windowWidth,
				_windowHeight:getApp().globalData._windowHeight
			}
		},
		
		onShow:function(){
			//如果是pk返回，要重新加载数据，不然加了经验或者等级不同步
			adSdk.initInterstitial(this.xcx_ad.interstitialId)
			adSdk.showInterstitial()
			this.is_login = uni.getStorageSync('is_login')?uni.getStorageSync('is_login'):false
			if(this.is_login){
				this.userinfo = uni.getStorageSync('userinfo')
			}else{
				this.isLogin()
			}
		},
		
		onLoad: function (option) {
			var that = this
			
			
			//判断是否有邀请码
			if(option.invitation_code){
				that.invitation_code = option.invitation_code
			}
			
			uni.getSystemInfo({
				success(res) {
					console.log(res)
					that.windowHeight = res.windowHeight
					that.windowWidth = res.windowWidth
					that.bili = res.windowWidth/750;
					//200是角色的rpx
					//roleWidth 为什么角色在手机中的实际px
					that.roleWidth = that.bili*200
					that.homeroleWidth = that.bili*250
					that.wordsHeight = that.bili*300
					that.attckHeight = that.bili*30
					that.roleHeight = (that.roleWidth*that.rolerealHeight)/that.rolerealWidth
					that.homeroleHeight = (that.homeroleWidth*that.homeroleralHeight)/that.homerolerealWidth
					//iphone5 1.775 iphone6  1.778 iphone6P  1.777  ipone15p 2.16
					var bili2 = that.windowHeight/that.windowWidth
					if(bili2>2.1){
						that.geduan_height = 300*that.bili
					}else if(bili2>2){
						that.geduan_height = 260*that.bili
					}else if(bili2>1.9){
						that.geduan_height = 220*that.bili
					}else if(bili2>1.8){
						that.geduan_height = 180*that.bili
					}else if(bili2>1.7){
						that.geduan_height = 150*that.bili
					}else if(bili2>1.6){
						that.geduan_height = 130*that.bili
					}else{
						that.geduan_height = 110*that.bili
					}
				}
			})
			
			that.zyindex()
		},
		
		onPullDownRefresh() {
			
		},
		
		
		onShareAppMessage() {
		   return {
			  path: "/pages/index/index"
			}
		},
		
		methods:{
			
			tuijianxcxJump(item){
				
				wx.navigateToMiniProgram({
					appId: item.appid,
					path: item.path,
				})
				
			},
			
			tuijian_window_close(){
				this.tuijian_window_show = false
				this.fighting_result_show =true
			},
			
			tuijian_window_open(){
				if(this.recommend_xcx.length==0){
					getRecommendXcx().then(res=>{
						if(res.code==0){
							this.recommend_xcx = res.data.list
							if(this.recommend_xcx.length>0){
								getApp().globalData.recommend_xcx = res.data.list
								this.fighting_result_show = false
								this.tuijian_window_show = true
							}else{
								this.msg('暂无推荐')
							}
						}
					})
				}else{
					this.fighting_result_show = false
					this.tuijian_window_show = true	
				}
			},
			
			adLoad() {
			    console.log('原生模板广告加载成功')
			},
			adError(err) {
			    console.error('原生模板广告加载失败', err)
			},
			adClose() {
			    console.log('原生模板广告关闭')
			},
			
			
			egg_window_open(){
				var that = this
				that.egg_window_show = true
			},
			
			egg_window_close(){
				var that = this
				that.egg_window_show = false
			},
			
			
			goNiudanji(){
				uni.navigateTo({
					url: '/pages/niudanji/index',
				});
			},
			
			goQiandao(){
				uni.navigateTo({
					url: '/pages/qiandao/index',
				});
			},
			
			fangtazou(){
				this.show_guaishou = false
				this.guaishou_window_close()
			},
			daguaishow(){
				this.showJiliAd()
			},
			
			//关闭怪兽提示窗口
			guaishou_window_close(){
				var that = this
				that.guaishou_window_show = false
			},
			
			guaishou_window_open(){
				var that = this
				that.guaishou_window_show = true
			},
			
			//沾沾欧皇气
			zhanzhan(){
				var that = this
				if(!that.zhanzhan_click){
					that.zhanzhan_click = true
					if(that.aotemaninfo.egg_prg<100){
						that.msg('凹特蛋还没成熟，使用能量石可以增加凹特蛋成熟度哦');
						that.zhanzhan_click = false;
						return
					}
					
					if(uni.getStorageSync('egg_'+that.aotemaninfo.egg_id)){
						that.msg('凹特蛋已经被你收获了');
						that.zhanzhan_click = false;
						return
					}
					//收获鸡蛋
					zhanzhan(that.aotemaninfo.egg_id,that.aotemaninfo.user_id).then(res=>{
						if(res.code==0){
							that.msg(res.msg)
							that.aotemaninfo.egg_prg = 0;
							that.aotemaninfo.egg_count = that.aotemaninfo.egg_count+1
							that.zhanzhan_click = false
						}else{
							that.msg(res.msg)
							that.zhanzhan_click = false
						}
					})
				}
			},
			
			nengliangshiUse(){
				var that = this
				if(!that.nengliangshi_use_click)
					that.nengliangshi_use_click = true
				if(that.add_nengliangshi<10){
					that.msg('能量石一次使用不能低于10个哦')
					that.nengliangshi_use_click = false
				}
				nengliangshiUse(that.add_nengliangshi).then(res=>{
					if(res.code==0){
						that.aotemaninfo['nengliangshi'] = res.data.nengliangshi
						that.nengliangshi_daojishi = res.data.nengliangshi_daojishi
						that.msg(res.msg)
						setTimeout(function(){
							that.nengliangshi_window_close()
						},1000)
					}else{
						that.msg(res.msg)
					}
				})
			},
			nengliangshi_change(e){
				this.add_nengliangshi = e.value
				this.add_max_nenglianshi = this.aotemaninfo.nengliangshi - this.add_nengliangshi
			},
			
			nengliangshi_window_open(){
				var that = this
				if(that.aotemaninfo.nengliangshi>=10){
					that.add_max_nengliangshi = that.aotemaninfo.nengliangshi
					that.add_nengliangshi = 10
				}
				
				that.nengliangshi_window_show = true
			},
			
			nengliangshi_window_close(){
				var that = this
				that.nengliangshi_use_click = false
				that.nengliangshi_window_show = false
			},
			
			daojishichange(e){
			},
			
			daojishifinish(e){
				var that = this
				that.nengliangshi_daojishi = 0;
				//去结算倒计时
			},
			
			changpage(page,type){
				if(page<1){
					return
				}
				var that = this
				if(type=='msg'){
					if(page!=that.notice_page){
						if(page>that.notice_page_data.last_page){
							return
						}
						console.log('notice_page',that.notice_page)
						that.notice_page = page
						that.zyMsgList()
					}
				}else if(type=='friends'){
					if(page!=that.friends_page){
						if(page>that.friends_page_data.last_page){
							return
						}
						that.friends_page = page
						that.xyFollowList()
					}
				}
			},
			
			message_back(){
				this.notice_msg_detail = []
				this.message_show = false
			},
			
			message_detail(msg){
				this.notice_msg_detail = msg
				this.message_show = true
			},
			
			zyMsgList(){
				var that = this
				zyMsgList(that.notice_page).then(res=>{
					if(res.code==0){
						that.notice_page_data = res.data
						that.notice_list = res.data.data
					}
				})
			},
			
			notice_window_open(){
				var that = this
				if(that.notice_list.length>0){
					
				}else{
					that.zyMsgList()
				}
				that.notice_window_show = true
			},
			
			notice_window_close(){
				this.message_show = false
				this.notice_window_show = false
			},
			
			
			goDetail(visituser_skeyid){
				
				if(visituser_skeyid == this.userinfo.openid ){
					this.msg('您不能访问您自己哦')
					return
				}
				uni.navigateTo({
					url: '/pages/zhuangyuan_others/index?visituser_skeyid='+visituser_skeyid,
				}); 
			},
			
			//狗狗消息
			dogMsg(){
				var that = this
				if(!that.show_dog_msg){
					var dog_msg = 	that.dog_msg_list[that.dogmsgindex]
					that.dogSayMsG(dog_msg)
					if(that.dogmsgindex<that.dog_msg_list.length-1){
						that.dogmsgindex = that.dogmsgindex + 1
					}else{
						that.dogmsgindex = 0
					}
				}
			},
			
			dogSayMsG(dog_msg){
				var that = this
				that.dog_msg = dog_msg
				that.show_dog_msg = true
				setTimeout(function(){
					that.dog_msg = ''
					that.show_dog_msg = false
				},2500)
			},
			
			aotemanMsg(){
				var that = this
				if(!that.show_aoteman_msg){
					var aoteman_msg = that.aoteman_msg_list[that.aotemanmsgindex]
					that.aotemanSayMsG(aoteman_msg)
					if(that.aotemanmsgindex<that.aoteman_msg_list.length-1){
						that.aotemanmsgindex = that.aotemanmsgindex + 1
					}else{
						that.aotemanmsgindex = 0
					}
				}
			},
			
			
			aotemanSayMsG(aoteman_msg){
				var that = this
				that.aoteman_msg = aoteman_msg
				that.show_aoteman_msg = true
				setTimeout(function(){
					that.aoteman_msg = ''
					that.show_aoteman_msg = false
				},1500)
			},
		
			
			addJn(){
				var that = this
				if(that.add_gongji<=0&&that.add_fangyu<=0){
					that.msg('请选择需要添加技能点的技能')
					return
				}
				if((that.add_gongji+that.add_fangyu)>that.aotemaninfo.jinengdian){
					that.msg('技能点不足')
					return
				}
				
				addJn(that.add_gongji,that.add_fangyu).then(res=>{
					if(res.code==0){
						that.aotemaninfo.jinengdian = res.data.jinengdian
						that.aotemaninfo.gongji = res.data.gongji
						that.aotemaninfo.fangyu = res.data.fangyu
						that.msg('技能添加成功')
						that.jineng_window_close()
					}
				})
				
			},
			
			gongji_change(e){
				this.add_gongji = e.value
				this.gongji = this.aotemaninfo.gongji + e.value
				this.jinengdian = this.aotemaninfo.jinengdian - this.add_gongji-this.add_fangyu
				this.add_max_gongji = this.aotemaninfo.jinengdian - this.add_fangyu
				
			},
			fangyu_change(e){
				this.add_fangyu = e.value
				this.fangyu = this.aotemaninfo.fangyu + e.value
				this.jinengdian = this.aotemaninfo.jinengdian - this.add_gongji-this.add_fangyu
				this.add_max_fangyu = this.aotemaninfo.jinengdian - this.add_gongji
			},
			
			jineng_window_open(){
				this.add_max_fangyu = this.aotemaninfo.jinengdian
				this.add_max_gongji = this.aotemaninfo.jinengdian
				this.gongji = this.aotemaninfo.gongji
				this.fangyu = this.aotemaninfo.fangyu
				this.jinengdian = this.aotemaninfo.jinengdian
				this.jineng_window_show = true
			},
			jineng_window_close(){
				this.add_max_gongji = 0
				this.add_gongji = 0
				this.gongji = 0
				this.add_max_fangyu = 0
				this.add_fangyu = 0
				this.fangyu = 0
				this.jinengdian = 0
				this.jineng_window_show = false
			},
			//index
			zyindex(){
				var that = this
				zyindex(that.invitation_code).then(res=>{
					if(res.code==0){
						that.nengliangshi_daojishi = res.data.aoteman.nengliangshi_daojishi
						that.aotemaninfo = res.data.aoteman
						that.aotemaninfo.age = getDateDiff2(res.data.aoteman.created_at)
						that.dog_msg_list = res.data.dog_msg_list
						that.aoteman_msg_list = res.data.aoteman_msg_list
						var res2 = getGradeJy(that.aotemaninfo.grade,that.aotemaninfo.jingyan)
						that.up_jingyan = res2.up_jingyan
						that.now_jingyan = res2.now_jingyan
						uni.setStorageSync('zyaotemaninfo',that.aotemaninfo)
						that.show_guaishou = res.data.show_guaishou
						that.img_list = res.data.img
						//如果显示怪兽就狗叫
						if(that.show_guaishou){
							that.dogSayMsG('汪汪汪，有个小怪兽！！！')
						}
					}
				})
			},
			//获取排行榜
			zyGetRankList(){
				zyGetRankList(this.rank_type).then(res=>{
					if(res.code==0){
						this.rank_list = res.data.list
						console.log(this.rank_list)
						
					}
				})
			},
			//排行榜list
			rank_list_open(){
				console.log('rank_list_open')
				if(this.rank_list.length==0){
					this.zyGetRankList()
					this.rank_list_show = true
				}else{
					this.rank_list_show = true
				}
				
			},
			
			change_rank_type(type){
				if(this.rank_type!=type){
					this.rank_list = []
					this.rank_type = type
					this.zyGetRankList()
				}
			},
			
			rank_list_close(){
				this.rank_list_show = false
			},
			
			xyFollowList(){
				var that = this
				xyFollowList(that.friends_page).then(res=>{
					if(res.code==0){
						that.friends_page_data = res.data
						that.friends_list = res.data.data
						if(that.friends_list.length>0)
						for(var i = 0 ;i<that.friends_list.length;i++){
							
							if(uni.getStorageSync('egg_'+that.friends_list[i].aotemanInfo.egg_id)){
								that.friends_list[i].aotemanInfo.ouhuang = false
							}else{
								that.friends_list[i].aotemanInfo.ouhuang = true
							}
							that.friends_list[i].online_at = getDateDiff(that.friends_list[i].aotemanInfo.online_at)
						}
						console.log(res)
					}
				})
			},
			
			//好友list
			friends_list_open(){
				if(this.friends_list.length==0){
					this.xyFollowList()
					this.friends_list_show = true
				}else{
					this.friends_list_show = true
				}
			},
			
			friends_list_close(){
				this.friends_list_show = false
			},
			
			fighting_result_close(){
				var that = this
				//看看是否有留言，如果有提交到后台，没有就完事关闭
				if(!that.fighting_over_click){
					that.fighting_over_click = true
					if(that.notice_msg!=''&&that.notice_msg_id>0){
						zyPkMgs(that.notice_msg,that.notice_msg_id,that.be_attack_user.user_id).then(res=>{
							if(res.code==0){
								that.msg(res.msg)
								setTimeout(function(){
									that.fighting_result_show = false
									that.scene_pk = false
									that.display_attack = false
									that.attack_btn = false
									that.pk_role2_status = ''
									that.pk_role1_status = ''
									that.rank_list = []
									that.friends_list = []
									that.notice_msg = '',
									that.notice_msg_id = 0
									that.fighting_over_click = false
								},1000)
							}else{
								that.fighting_over_click = false
								that.msg(res.msg)
							}
						})
					}else{
						that.fighting_result_show = false
						that.scene_pk = false
						that.display_attack = false
						that.attack_btn = false
						that.pk_role2_status = ''
						that.pk_role1_status = ''
						that.rank_list = []
						that.friends_list = []
						that.fighting_over_click = false
						that.notice_msg = '',
						that.notice_msg_id = 0
					}
				}
			},
			
			randompk(){
				var that = this
				if(!that.pk_click){
					that.pk_click = true
					//先在前端判断一下体力
					if(that.aotemaninfo.tili<10){
						that.pk_click = false
						that.msg('体力不足')
						return
					}else{
						randompk(that.aotemaninfo.user_id,that.aotemaninfo.pk_count).then(res=>{
							if(res.code==0){
								that.gopk(res.data.aotemaninfo)
								setTimeout(function(){
									that.pk_click = false
								},1500)
							}else{
								that.msg(res.msg)
								setTimeout(function(){
									that.pk_click = false
								},1500)
							}
						})
					}
				}
				
			},
			//指定pk
			tedingpk(be_attack_user){
				var that = this
				if(!that.pk_click){
					that.pk_click = true
					//先在前端判断一下体力
					if(that.aotemaninfo.pk_record){
						that.msg('您今天已经和他pk过了，一天只能和他pk一次哦')
						return
					}else if(that.aotemaninfo.tili<10){
						that.msg('体力不足')
						that.pk_click = false
						return
					}else{
						tedingpk(be_attack_user.user_id).then(res=>{
							if(res.code==0){
								that.gopk(res.data.aotemaninfo)
								setTimeout(function(){
									that.pk_click = false
								},1500)
							}else{
								that.msg(res.msg)
								setTimeout(function(){
									that.pk_click = false
								},1500)
							}
						})
					}
				}
			},
			
			gopk(be_attack_user){
				var that = this
				//先在前端判断一下体力
				if(that.aotemaninfo.tili<10){
					that.msg('体力不足')
					return
				}
				that.friends_list_show = false
				that.rank_list_show = false
				if(!that.scene_pk){
					that.scene_pk = true
					that.be_attack_user = be_attack_user
					//播放背景音效
					playSound('/static/music/crash2.mp3')
					//进入场景三秒后才出现攻击按钮
					setTimeout(function(){
						that.display_attack = true
					},3000)
				}
			},
			attack(){
				var that = this				
				if(!that.attack_btn){
					that.user_attack 	= true
					that.attack_btn 	= true
					//背景音乐
					playSound('/static/music/attck.mp3')
					uni.vibrateLong({})
					//后台处理数据，返回结果
					attack(that.be_attack_user.user_id).then(res=>{
						if(res.code==0){
							that.fighting_result = res.data
							that.aotemaninfo.tili = res.data.tili
							that.aotemaninfo.grade = res.data.grade
							that.aotemaninfo.jingyan = res.data.all_jingyan
							that.aotemaninfo.jinengdian = res.data.jinengdian
							that.notice_msg_id = res.data.notice_msg_id
							var res2 = getGradeJy(res.data.grade,res.data.all_jingyan)
							that.up_jingyan = res2.up_jingyan
							that.now_jingyan = res2.now_jingyan
							that.grade_percentage = that.now_jingyan/that.up_jingyan*100
							console.log(res)
							//第一中情况胜利了
							if(res.data.status==1){
								that.pk_role2_status = 'pk_fail_role2'
								setTimeout(function(){
									//关闭攻击状态
									that.user_attack = false
								},1000)
								
								setTimeout(function(){
									//2s后弹窗宣布结果，是否留言，增加经验什么的。。。
									that.fighting_title = '挑战成功'
									that.fighting_result_show = true
								},2000)
								
							}else if(res.data.status==2){
								//这个是输了的状态
								that.pk_role2_status = 'pk_win_role2'
								setTimeout(function(){
									//关闭攻击状态
									that.user_attack = false
								},1000)
								setTimeout(function(){
									//轮到对面攻击
									that.pk_role1_status = 'pk_fail_role1'
									playSound('/static/music/attck.mp3')
									uni.vibrateLong({})
									that.user_be_attack = true
									//到自己震动
								},2500)
								
								setTimeout(function(){
									//关闭攻击状态
									that.user_be_attack = false
									//关闭震动
								},3500)
								
								setTimeout(function(){
									//2s后弹窗宣布结果，是否留言，增加经验什么的。。。
									that.fighting_title = '挑战失败'
									that.fighting_title_color = '#000000';
									that.fighting_result_show = true
								},4500)
								
							}else if(res.data.status==3){
								//这个是平局了的状态
								that.pk_role2_status = 'pk_win_role2'
								setTimeout(function(){
									//关闭攻击状态
									that.user_attack = false
								},1000)
								setTimeout(function(){
									//轮到对面攻击
									that.pk_role1_status = 'pk_win_role1'
									playSound('/static/music/attck.mp3')
									uni.vibrateLong({})
									that.user_be_attack = true
									//到自己震动
								},2500)
								
								setTimeout(function(){
									//关闭攻击状态
									that.user_be_attack = false
									//关闭震动
								},3500)
								
								setTimeout(function(){
									//2s后弹窗宣布结果，是否留言，增加经验什么的。。。
									that.fighting_title = '不相上下'
									that.fighting_title_color = '#00ff0a';
									that.fighting_result_show = true
								},4500)
							}
						}
					})
				}
			},
			
			
			music(){
				const innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.autoplay = false  // 是否自动开始播放，默认为 false
				innerAudioContext.loop = false  // 是否循环播放，默认为 false
				uni.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
				  obeyMuteSwitch: false,   // 是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。
				  success: function (e) {
				  },
				  fail: function (e) {
				  }
				})
				innerAudioContext.src="/static/music/attck.mp3"
				innerAudioContext.play()
			},
			
			
			isLogin(){
				if(this.is_login){
					return true
				}else{
					//登录
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}
			},
			
			back(){
				const pages = getCurrentPages();
				console.log(pages.length)
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/index/index',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			}, 
			
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
			
			//消灭怪兽
			getNengliangshiByguaishou(){
				var that = this
				getNengliangshiByguaishou().then(res=>{
					if(res.code==0){
						that.msg(res.msg)
						that.aotemaninfo.nengliangshi = that.aotemaninfo.nengliangshi+res.data.count
						that.show_guaishou = false
						that.guaishou_window_close()
					}else{
						that.msg(res.msg)
					}
				})
			},
			
			
			//广告
			showJiliAd(){
				var that = this
				if(that.show_ad){
					that.jiliAd()
					
				}else{
					//没有广告直接抓
					that.getNengliangshiByguaishou()
				}
			}, 
			
			
			jiliAd(){
				var that =this
				// 在页面中定义激励视频广告
				let videoAd = null
				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
				  videoAd = wx.createRewardedVideoAd({
				    adUnitId: that.xcx_ad.jili
				  })
				  videoAd.onLoad(() => {})
				  videoAd.onError((err) => {})
				  videoAd.onClose((res) => {
					  if(res&&res.isEnded){
							//看完广告了
							that.getNengliangshiByguaishou()
					  }else{
							that.msg('观看完广告后打败小怪兽可以获得五颗能量石哦')
					  }
				  })
				}
				// 用户触发广告后，显示激励视频广告
				if (videoAd) {
				  videoAd.show().catch(() => {
				    // 失败重试
				    videoAd.load()
				      .then(() => videoAd.show())
				      .catch(err => {
				        console.log('激励视频 广告显示失败')
				      })
				  })
				}
			},
		}
	}
</script>
<style>
	.daojishi .u-count-down__text{font-size: 25rpx!important;width: 120rpx!important;
	height: 40rpx!important;line-height: 40rpx!important;text-align: center!important;
	color: #fff!important;line-height: 45rpx!important;}
	.u-popup__content{background-color: transparent!important;}
</style>
<style scoped>
	.tuijianli .word{color:#fff}
	.tuijian_window .close{position: absolute;right: -30rpx;top: -35rpx;width: 60rpx;}
	.tuijianli{width: 170rpx;height: 220rpx; overflow: hidden;border: 5rpx solid #3f51b5;
		border-radius: 20rpx;box-sizing: border-box;}
	.tuijianli_box{width: 560rpx;}
	.tuijian_window{width: 600rpx;height: 600rpx;background-color: #03A9F4;border-radius: 30rpx;}
	.zhanzhan image{width: 100%;}
	.zhanzhan{position: absolute;width: 70rpx;right: -60rpx;z-index: 3;
		animation: zhanzhan .5s linear infinite}
	@keyframes zhanzhan{
			0%{right:-60rpx}
			50%{right:-50rpx}
			100%{right:-60rpx}
		}
	.guaishou_window .bottom .vv{width: 50%;height: 100%;}
	.guaishou_window .bottom{width: 100%;height: 100rpx;color: #fff;font-size: 40rpx;
		background-color: #03A9F4;}
	.guaishou_window .middle{height: 250rpx;line-height: 50rpx;
		color: #a8a8a8;margin: 0 30rpx;text-align: center;}
	.guaishou_window .top .guaishou_count{font-size: 40rpx;font-weight: bold;}
	.guaishou_window .top .guaishouicon image{width: 150rpx;margin-top: 20rpx;}
	.guaishou_window .top .guaishouicon{transform: scaleX(-1);}
	.guaishou_window .top{height: 250rpx;width: 100%;}
	.guaishou_window{width: 600rpx;height: 600rpx;background-color: #fff;border-radius: 10px;overflow: hidden;}
		
	.eggrecord>view{height: 50rpx;line-height: 60rpx;color: ##7f7f7f;text-align: right;}
	.eggrecord{width: 210rpx;border-bottom: 1px solid #f5f5f5;}	
	.egg_window .bottom{width: 100%;height: 100rpx;color: #fff;font-size: 40rpx;
		background-color: #03A9F4;}
	
	.egg_window .middle{height: 250rpx;line-height: 50rpx;
		color: #a8a8a8;margin: 0 30rpx;text-align: center;}
	.egg_window .top .egg_count{font-size: 40rpx;font-weight: bold;}
	.egg_window .top .win_egg{height: 120rpx;width: 96rpx;border-radius: 50%/55% 55% 45% 45%;}
	.egg_window .top{height: 250rpx;width: 100%;}
	.egg_window{width: 600rpx;height: 600rpx;background-color: #fff;border-radius: 10px;overflow: hidden;}
	
		
		
	
	.nengliangrecord>view{height: 50rpx;line-height: 60rpx;color: ##7f7f7f;text-align: right;}
	.nengliangrecord{width: 210rpx;border-bottom: 1px solid #f5f5f5;}	
	.nengliangshi_window .bottom{width: 100%;height: 100rpx;color: #fff;font-size: 40rpx;
		background-color: #03A9F4;}
	.nengliangshi_window .middle2{height: 250rpx;line-height: 50rpx;
		color: #a8a8a8;margin: 0 30rpx;text-align: center;}	
	.nengliangshi_window .middle{height: 250rpx;line-height: 50rpx;
		color: #a8a8a8;margin: 0 30rpx;text-align: center;}
	.nengliangshi_window .top .nengliangshi_count{font-size: 40rpx;font-weight: bold;}
	.nengliangshi_window .top .nengliangshi{height: 120rpx;
		width: 120rpx;border-radius: 50%/55% 55% 75% 65%;}
	.nengliangshi_window .top{height: 250rpx;width: 100%;}
	.nengliangshi_window{width: 600rpx;height: 600rpx;background-color: #fff;border-radius: 10px;overflow: hidden;}
	
	
	.chongnengliangzao{position: absolute;top: -120rpx;left: 65rpx;width: 200rpx;height: 200rpx;
		border-radius: 100%;opacity: .7;}
	
	.chongnengzhong{position: absolute;top: -72rpx;width: 250rpx;height: 68rpx;
		border-radius: 50rpx;font-size: 35rpx;color: #fff;}
	.daojishibg{position: absolute;top: -120rpx;left: 65rpx;width: 120rpx;height: 40rpx;
		border-radius: 20rpx;opacity: .7;}
	.daojishi{position: absolute;top: -120rpx;left: 65rpx;width: 120rpx;height: 40rpx;
		border-radius: 20rpx;}
	.aotenengliangshi{position: absolute;top: 244rpx;
		left: 111rpx;width: 30rpx;height: 30rpx;
		border-radius: 50%/55% 55% 75% 65%;}
	.notice_window_box2 .v4 .v42{width: 35%;height: 100%;font-weight: bold;}
	.notice_window_box2 .v4 .v41{width: 65%;height: 100%;color: red;}
	.notice_window_box2 .v4{height: 120rpx;margin: 0 20rpx;}
	.notice_window_box2 .v31 image{width: 120rpx;}
	.notice_window_box2 .v31{position: absolute;top: 0;left: 0;}
	.notice_window_box2 .v3{height: 470rpx;margin: 0 20rpx;}
	.notice_window_box2 .v2{position: absolute;font-size: 30rpx; font-weight: bold;z-index: 2;
		top: -20rpx;right: 0;width: 100rpx;height: 100rpx;}
	.notice_window .notice_middle{flex:1}
	.notice_window .notice_right{width: 200rpx;}
	.notice_window .notice_left{width: 170rpx;}
	.notice_title{font-weight: bold;}
	.notice_window .notice_window_li{height: 60rpx;}
	.notice_window .notice_window_list_box{}
	.notice_window{width: 650rpx;height: 650rpx;}
	
	/* 图片变黑白 */
	.img_black-and-white { filter: grayscale(100%);}
	
	/* 特效 */
	:root{--color2:#56d5fc;--color4:#def700;--color6:#fa3195;}
	.caisebg{
		background-image: linear-gradient(135deg,
		var(--color2),var(--color4),var(--color6));
	}
	
	.caisebg2{
		background-image: linear-gradient(135deg,
		red,pink,yellow);
	}
	
	.caisebg3{
		background-image: linear-gradient(180deg,
		#ff000078,#ffc0cb33,yellow);
	}
	
	.nengliangshibg{
		background-image: linear-gradient(135deg,
		white,#d4896e,black);
	}
	
	.eggbg{background-image: linear-gradient(135deg,
		#d7915b,white,#c75050);
		
	}
	.anim360{animation: rotate360 1s linear infinite}
	/* 特效 */
	
	@keyframes rotate360{100%{filter: hue-rotate(360deg);}}
	
	.pop_li_middle_bottom  .online_at{background-color: #00bcd4 ;}
	.user_chenghao_box{position: absolute;top: 60px;width: 450rpx;left: 135rpx;}
	.paiming{width: 100rpx;display: flex;align-items: center;justify-content: center;}
	.fenye_box .pagebtn2{color: #909399!important;border: solid 1px #DEDEDE!important;}
	.fenye_box .pagebtn{height: 40rpx;padding: 0 20rpx;border: solid 1px #3c9cff;color: #3c9cff;
		display: flex;justify-content: center;align-items: center;}
	.fenye_box{height: 60px;width: 100%;color: #515151;font-size: 25rpx;justify-content: space-evenly}
	


	.pk_user_name2{background-color: #ff9800;color: #fff;border-radius: 30rpx;}
	.pk_user2{height: 150rpx;width: 200rpx;z-index: 6;position: absolute; left: 950px;}
	.pk_user_name1{background-color: #03A9F4;color: #fff;border-radius: 30rpx;}
	.pk_user1{height: 150rpx;width: 200rpx;z-index: 6;position: absolute; left: -200px;}
	.pk_user_icon image{width: 100rpx;}
	.pk_user_icon{border-radius: 100%;overflow: hidden;}
	.big_animaton{
		animation: big_animaton .3s linear forwards;
	}
	/* pk分割线 */
	@keyframes big_animaton {
		0% {transform:scale(1);}
		50% {transform:scale(1.05);}
		100% {transform:scale(1);}
	}
	
	.btn_radius view{height: 100%;width: 400rpx;display: flex;justify-content: center;align-items: center;
		border-radius: 50rpx;color: #FFF;font-size: 45rpx;
		background-color: #0bec7c;}
	.btn_radius{width: 100%;;height: 100rpx;display: flex;justify-content: center;
		align-items: center;position: relative;margin-top: 40rpx;}
	.jineng_window .jn_gongji{}
	.jineng_window_title{height: 100rpx;font-size: 40rpx;}
	.jineng_window{width: 100%;height: 500rpx;background-color: #fff;}
	.badge2{width: 40rpx;height: 40rpx;border-radius: 100%;background-color: red;
		position: absolute;color: #fff;font-size: 20rpx;top: -15rpx;right: -15rpx;}
	.badge{width: 40rpx;height: 40rpx;border-radius: 100%;background-color: red;
		position: absolute;color: #fff;font-size: 20rpx;top: -20rpx;right: 15rpx;}
	.pkline2{transform: rotate(180deg);}
	.pop_fenlei .active{background-color: #7AE9FF!important;}
	.pop_fenlei_li{font-size: 30rpx;height: 45rpx; 
	width: 120rpx;background-color: #bababa;color: #FFF;border-radius: 20rpx;}
	.pop_fenlei{height: 80rpx;}
	.jyprg{height: 30rpx;width: 150rpx;}
	.eggprogress{position: absolute;top: 205rpx;left: 540rpx;height: 30rpx;
		width: 150rpx;z-index: 4;border-radius: 30rpx;background-color: #b3b3b3}
	.eggprogress2{position: absolute;top: 0rpx;left: 0rpx;height: 30rpx;
			border-radius: 30rpx;background-color: #ED4D46;}
	.eggprogress_text{z-index: 4;color: #fff;height: 30rpx;line-height: 30rpx;}
	.pop_li_right image{width: 100%;}
	.pop_li_right{width: 70rpx;margin-right: 30rpx;}
	.pop_li_middle_name .v2{height: 35rpx;padding: 0 10rpx;border-radius: 20rpx;
		display: flex;align-items: center;justify-content: center;color: #fff;}
	.pop_li_middle_name .v1{max-height: 250rpx;}
	.pop_li_middle_name{font-size: 35rpx;font-weight: bold;}
	.pop_li_middle_bottom .grade{background-color: #259fff;}
	.chenghao{font-size: 25rpx;border-radius: 20rpx;
		padding: 0 20rpx;height: 40rpx;color: #fff;}
	.pop_li_middle_bottom .v1{font-size: 25rpx;border-radius: 20rpx;padding: 0 10rpx;height: 40rpx;color: #fff;}
	.pop_li_middle{margin-left: 20rpx;flex:1}
	.pop_li_icon_sign{transform: rotate(45deg);position: absolute;
		top: -4rpx;width: 45rpx!important;left: 90rpx;}
	.pop_li_icon image{width: 100%;border-radius: 100%;}
	.rank_pop_li_icon{margin-left: 0!important;}
	.pop_li_icon{width: 120rpx;height: 120rpx;margin-left: 30rpx;}
	.pop_li{padding: 20rpx 0;border-top: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;}
	.pop_navbar .pop_navbar_text{font-size: 30rpx;font-weight: bold;}
	.rakn_pop_list_box{height: 1020rpx!important;overflow: scroll;}
	.pop_list_box{height: 1100rpx;overflow: scroll;}
	.pop_navbar{height: 100rpx;margin: 0 30rpx;width: 690rpx;align-items: center;
		position: absolute;top: 0;display: flex;justify-content: space-between;}
	.pop_icon image{width: 100%;}
	.pop_icon{width: 150rpx;height: 150rpx;overflow: hidden;border-radius: 100%;margin-top:-75rpx}
	.pop_list_window_h{height:1200rpx}
	.bottom_menu .li .nengliangshi{border-radius: 50%/55% 55% 75% 65%;}
		
	.xixiegg{border-radius: 50%/55% 55% 45% 45%;width: 38rpx;height: 48rpx;}	
	.top_meun .li .topegg{border-radius: 50%/55% 55% 45% 45%;
		width: 48rpx;height: 60rpx;}
		
	.bottom_menu .li .meun_icon image{width: 100%;}
	.bottom_menu .li .meun_icon{width: 100rpx;height: 100rpx;}
	.bottom_menu .li{width: 150rpx;height: 150rpx;color: #fff;}
	.bottom_menu{position: absolute;width: 100%; height: 150rpx;z-index: 2;justify-content: space-around;}
	.top_meun .li .meun_icon image{width: 100%;}
	.top_meun .li .meun_icon{width: 60rpx;height: 60rpx;display: flex;align-items: center;justify-content: center;}
	.top_meun .li{height: 100%;width: 100rpx;margin-top: 10rpx;}
	.top_meun{display: flex;align-items: center;color: #795548;flex-wrap: wrap;justify-content: flex-end;}
	.top_menu_box{position: absolute;top: 80px;left:430rpx;width: 300rpx;z-index: 2;}
	.user_window .usernamebox .v2{padding-left: 30rpx;}
	.user_window .usernamebox .v1{height: 60rpx;max-width: 250rpx; padding-left: 30rpx;
		background-color: #000;padding-right: 20rpx;border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;position: absolute;left: 0;top: 0;opacity: .2;}
	.user_window .usernamebox{height: 60rpx;max-width: 250rpx;padding-right: 20rpx;
		margin-left: -20rpx;color: #fff;position: relative;font-size: 30rpx;}
	.user_window .usericon image{width: 100%;}
	.user_window .usericon{width: 100rpx;height: 100rpx;border-radius: 100%;overflow: hidden;z-index: 2;}
	.user_window{position: absolute;top: 75px;left: 45rpx;display: flex;align-items: center;}
	
	.close_fighting_window{width: 100rpx;height: 60rpx;color: #fff;background-color: #8bc34a;
	border-radius: 20rpx;}
	.fighting_msg{margin: 20rpx;}
	.aotemantips .aotemanicon image{width: 50rpx;}
	.aotemantips{margin: 20rpx;}
	.u-percentage-slot {
		padding: 2rpx 10rpx;
		background-color: $u-warning;
		color: #fff;
		border-radius: 100rpx;
		font-size: 20rpx;
		margin-right: -1rpx;
		position: absolute;
		width: 200rpx;
		left: 0
	}
	.jingyantext .v1,.jingyantext .v2{color: #89ff00;}
	.jingyantext{color: #fff;}
	.jingyanprg{height: 30rpx;width: 150rpx;}
	.fighting_grade .v3{color: #fff;}
	.fighting_grade .v2{font-size: 35rpx;color: yellow;font-style: italic;font-weight: bold;}
	.fighting_grade .v1{color: #fff;}
	.fighting_grade{align-items: flex-end;}
	.fighting_name{font-weight: bold;}
	.nameandgrade{height: 40rpx;align-items: flex-end;}
	.uesrinfo{margin: 20rpx;height: 100rpx;background-color: #ff9800;}
	.fighting_window_right{width: 440rpx;}
	.fighting_icon image{width: 100%;height: 100%;}
	.fighting_icon{width: 100rpx;height: 100rpx;border-radius: 100%;overflow: hidden;}
	.fighting_title{font-size: 100rpx;width: 100%;text-align: center;
		margin-top: -65rpx;font-weight: bold;font-style: italic;-webkit-text-stroke:5rpx red}
	.fighting_window{width: 600rpx;background-color: #259fff;padding-bottom: 20rpx;color: #fff;border-radius: 20rpx;}
	.forbid_gongji{background-color: #9e9e9e!important;}
	.gongji{position: absolute;z-index: 6;width: 100rpx;height: 100rpx;
		border-radius: 100%;background-color: #ff003b;left: 70rpx;font-size: 50rpx;
    font-weight: bold;background-color: #E91E63;color: #fff;}
	.text{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 300rpx;
		height: 300rpx;
		font-size: 300rpx;
	}

	.v{position: absolute;z-index: 6;left: 150rpx;opacity: 0;}
	.s{position: absolute;z-index: 6;left: 300rpx;color: #fff;}
	
.loader{
  position: absolute;
  width: 330rpx;
  left: 210rpx;
  height: 30rpx;
  z-index: 9;
}

.pkline_in{
	animation: pkline_in .2s linear forwards;
}
/* pk分割线 */
@keyframes pkline_in {
	100% {
	  top: 0;
	}
}

.scenepkin{
	animation: scene_pk_in .2s linear forwards;
}
/* pk场景进场动画 */
@keyframes scene_pk_in {
	100% {
	  left: 0;
	}
}
.pk_left_aoteman_in{
	animation: pk_left_aoteman_in .5s linear forwards;
}
/* pk奥特曼出来 */
@keyframes pk_left_aoteman_in {
	100% {
	  left: 20rpx;
	}
}
.pk_right_aoteman_in{
	animation: pk_right_aoteman_in .5s linear forwards;
}
/* pk奥特曼出来 */
@keyframes pk_right_aoteman_in {
	100% {
	  left: 530rpx;
	}
}
.vin{animation: wordsVin 3s linear forwards;}
@keyframes wordsVin{
0%{transform: rotateY(0deg) scale(0);}
30%{transform: rotateY(3600deg) scale(1);opacity: 1;}
95%{transform: translateY(0) scale(1); opacity: 1;}
100%{transform: translateY(-1000rpx) scale(0); opacity: 1;}
}

.sin{animation: wordSin 3s linear forwards;}
@keyframes wordSin{
0%{transform: rotateY(0deg) scale(0);}
30%{transform: rotateY(3600deg) scale(1);opacity: 1;}
95%{transform: translateY(0) scale(1); opacity: 1;}
100%{transform: translateY(1000rpx) scale(0); opacity: 1;}
}

@keyframes pk_fail_role1 {
0%{transform: rotate(0deg) scaleX(-1);}
5%{transform: rotate(-10deg) scaleX(-1);}
10%{transform: rotate(0deg) scaleX(-1);}
15%{transform: rotate(-10deg) scaleX(-1);}
20%{transform: rotate(0deg) scaleX(-1);}
25%{transform: rotate(-10deg) scaleX(-1);}
30%{transform: rotate(0deg) scaleX(-1);}
35%{transform: rotate(-10deg) scaleX(-1);}
40%{transform: rotate(0deg) scaleX(-1);}
45%{transform: rotate(-10deg) scaleX(-1);}
50%{transform: rotate(0deg) scaleX(-1);}
55%{transform: rotate(-10deg) scaleX(-1);}
60%{transform: translateY(-50rpx) translateX(-50rpx) rotate(0deg) scaleX(-1) scale(.8);}
70%{transform: translateY(-100rpx) translateX(-100rpx) rotate(180deg) scaleX(-1) scale(.6);}
80%{transform: translateY(-150rpx) translateX(-150rpx) rotate(360deg) scaleX(-1) scale(.4);}
90%{transform: translateY(-200rpx) translateX(-200rpx) rotate(0deg) scaleX(-1) scale(.2);}
100%{transform: translateY(-250rpx) translateX(-250rpx) rotate(180deg) scaleX(-1) scale(0);opacity: 0;}
}

@keyframes pk_win_role1 {
0%{transform: rotate(0deg) scaleX(-1);}
5%{transform: rotate(-10deg) scaleX(-1);}
10%{transform: rotate(0deg) scaleX(-1);}
15%{transform: rotate(-10deg) scaleX(-1);}
20%{transform: rotate(0deg) scaleX(-1);}
25%{transform: rotate(-10deg) scaleX(-1);}
30%{transform: rotate(0deg) scaleX(-1);}
35%{transform: rotate(-10deg) scaleX(-1);}
40%{transform: rotate(0deg) scaleX(-1);}
45%{transform: rotate(-10deg) scaleX(-1);}
50%{transform: rotate(0deg) scaleX(-1);}
55%{transform: rotate(-10deg) scaleX(-1);}
60%{transform: rotate(0deg) scaleX(-1);}
65%{transform: rotate(-10deg) scaleX(-1);}
70%{transform: rotate(0deg) scaleX(-1);}
75%{transform: rotate(-10deg) scaleX(-1);}
80%{transform: rotate(0deg) scaleX(-1);}
85%{transform: rotate(-10deg) scaleX(-1);}
90%{transform: rotate(0deg) scaleX(-1);}
95%{transform: rotate(-10deg) scaleX(-1);}
100%{transform: rotate(0deg) scaleX(-1);}
}



@keyframes pk_fail_role2 {
0%{transform: rotate(0deg);}
5%{transform: rotate(10deg);}
10%{transform: rotate(0deg);}
15%{transform: rotate(10deg);}
20%{transform: rotate(0deg);}
25%{transform: rotate(10deg);}
30%{transform: rotate(0deg);}
35%{transform: rotate(10deg);}
40%{transform: rotate(0deg);}
45%{transform: rotate(10deg);}
50%{transform: rotate(0deg);}
55%{transform: rotate(10deg);}
60%{transform: translateY(-50rpx) translateX(50rpx) rotate(0deg) scale(.8);}
70%{transform: translateY(-100rpx) translateX(100rpx) rotate(180deg) scale(.6);}
80%{transform: translateY(-150rpx) translateX(150rpx) rotate(360deg) scale(.4);}
90%{transform: translateY(-200rpx) translateX(200rpx) rotate(0deg) scale(.2);}
100%{transform: translateY(-250rpx) translateX(250rpx) rotate(180deg) scale(0);opacity: 0;}
}

@keyframes pk_win_role2 {
0%{transform: rotate(0deg);}
5%{transform: rotate(10deg);}
10%{transform: rotate(0deg);}
15%{transform: rotate(10deg);}
20%{transform: rotate(0deg);}
25%{transform: rotate(10deg);}
30%{transform: rotate(0deg);}
35%{transform: rotate(10deg);}
40%{transform: rotate(0deg);}
45%{transform: rotate(10deg);}
50%{transform: rotate(0deg);}
55%{transform: rotate(10deg);}
60%{transform: rotate(0deg);}
65%{transform: rotate(10deg);}
70%{transform: rotate(0deg);}
75%{transform: rotate(10deg);}
80%{transform: rotate(0deg);}
85%{transform: rotate(10deg);}
90%{transform: rotate(0deg);}
95%{transform: rotate(10deg);}
100%{transform: rotate(0deg);}
}

.loader::after{
  content: '';
  position: absolute;
  top: 50%;
  width: 60rpx;
  height: 60rpx;
  background-color: #0bec7c;
  border-radius: 50%;
  transform: translateY(-50%) scale(0);
  animation: animateDot .2s linear infinite;

}

@keyframes animateDot {
  0%{
   transform: translateY(-50%) scale(0);
  }
  5%{
    transform: translateY(-50%) scale(1);
  }
  15%, 20%{
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 4px  #0bec7c22,
    0 0 0 10px #0bec7c22,
    0 0 20px #0bec7c,
    0 0 40px 5px #0bec7c,
    0 0 60px 10px #0bec7c;
  }
  40%{
    transform: translateY(-50%) translateX(315rpx) scale(1);
  }
  80%{
    transform: translateY(-50%) translateX(315rpx)  scale(1);
    box-shadow: 0 0 0 4px  #0bec7c22,
    0 0 0 10px #0bec7c22,
    0 0 20px #0bec7c,
    0 0 40px 5px #0bec7c,
    0 0 60px 10px #0bec7c;
  }
  95%{
    transform: translateY(-50%) translateX(315rpx) scale(1);
    box-shadow: none;
  }
  100%{
    transform: translateY(-50%) translateX(315rpx) scale(0);
  }
}

	.pk_win_role1{animation: pk_win_role1 1.5s linear forwards;}
	.pk_fail_role1{animation: pk_fail_role1 1.5s linear forwards;}

	.pk_win_role2{animation: pk_win_role2 1.5s linear forwards;}
	.pk_fail_role2{animation: pk_fail_role2 1.5s linear forwards;}
	/* 530rpx */
	.pk-role2{position: absolute;z-index: 5;left: 950rpx;}
	.pk-role2 image{width: 200rpx;}
	
	.pk-role1{position: absolute;z-index: 5;left: -200rpx;}
	.pk-role1 image{width: 200rpx;transform: scaleX(-1);}
	
	.triangle-right {
	  width: 0;
	  height: 0;
	  z-index: 5;
	  position: absolute;
	  top: 0;
	}
	
	.triangle-left {
	  width: 0;
	  height: 0;
	  z-index: 5;
	  position: absolute;
	  top: 0;
	}
	
	.diagonal-line {
		background:  linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) calc(50% - 5px),
		yellow 50%, rgba(0, 0, 0, 0) calc(50% + 5px),rgba(0, 0, 0, 0) 100%);
		position: absolute;
		z-index: 5;
	}
	.scene2{height: 100vh;position: absolute;top: 0;overflow: hidden;}
	.egg{position: absolute;top: 150rpx;z-index: 3;left: 585rpx;width: 70rpx;height: 87rpx;
		border-radius: 50%/55% 55% 45% 45%;}
		
	@keyframes amSize{
		0%{background-position: 0 0;}
		100%{background-position: 1000% 0;}
	}

	.aoteman-msg-jiantou {width: 0; height: 0; border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;border-top: 10rpx solid #fff;
		position: absolute;bottom: -7rpx;left: 115rpx;z-index: 1;}
	.aoteman-msg{width: 230rpx;font-size: 25rpx;padding: 10rpx 20rpx;position: absolute;
		border-radius: 5rpx;background-color: #fff;bottom: 400rpx;z-index: 2;}
	.aoteman{position: absolute;top: 160rpx;z-index: 3;left: 250rpx;}
	.aoteman image{width: 250rpx;}
	.grade_notice_text{position: absolute; top: 40rpx;left: 35rpx;font-size: 25rpx;color:#945F4F;font-weight: bold;}
	.grade_notice{position: absolute;top: 240rpx;z-index: 3;left: 515rpx;}
	.grade_notice image{width: 230rpx;}
	
	.guaishou{position: absolute;top: 400rpx;z-index: 4;left: 100rpx;transform: scaleX(-1);}
	.guaishou image{width: 150rpx;}
	
	.icon-home-mailbox_empty{position: absolute;top: 320rpx;z-index: 3;}
	.icon-home-mailbox_empty image{width: 100rpx;}
	.dog-msg-jiantou {width: 0; height: 0; border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;border-top: 10rpx solid #fff;
		position: absolute;bottom: -7rpx;left: 110rpx;z-index: 1;}
	.dog-msg{width: 230rpx;font-size: 25rpx;padding: 10rpx 20rpx;position: absolute;
		border-radius: 5rpx;background-color: #fff;bottom: 230rpx;z-index: 2;}
	.dog-work{position: absolute;left: 40rpx;top: 60rpx;z-index: 3;}
	.dog-work image{width: 230rpx;}
	.food{position: absolute;left: 500rpx;top: 175rpx;z-index: 3;}
	.food image{width: 230rpx;}
	.granary{position: absolute;left: 500rpx;top: -20rpx;z-index: 3;}
	.granary image{width: 230rpx;}
	.bubble{position: absolute;z-index: 1;top: -64rpx;left: 120rpx;}
	.bubble image{width: 125rpx;}
	.water{position: absolute;left: -35rpx;top: -217rpx;}
	.water image{width: 230rpx;}
	.wheel{position: absolute;left: -35rpx;top: -217rpx;animation: rotate-anime 10s linear infinite;}
	.wheel image{width: 230rpx;}
	.A{position: absolute;top: -130rpx;z-index: 1;left: 20rpx;}
	.A image{width: 120rpx;}
	.geduan{background-color: #7AE9FF;z-index: 4;}
	.navbar{height: 44px;background-color: #7AE9FF;position: absolute;top: 0;}
	.bg1 image{width: 100%;height: 604rpx;}
	.bg2{z-index: 2;position: relative;}
	.bg2 image{width: 100%;height: 650px;}
	.box1{margin-top: -300rpx;}
	@-webkit-keyframes rotate-anime{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
	@keyframes rotate-anime{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
	
	.backzhezhao{width: 100%;height: 100%;border-radius: 100%;background-color: #000000;
		opacity: .5;position: absolute;top: 0;}
	.back{width: 60rpx;height: 60rpx;position: fixed;top: 38px;left: 24px;z-index: 99999;}
	.back image{width: 100%;height: 100%;z-index: 3;position: relative;}
	
	button::after{
	 	border: none;
	}
	button{
		border-radius: 0!important;
		margin: 0;
		padding: 0;
		position: relative;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: inherit;
		background-color: transparent!important;
	}

</style>